<template>
	<view class="h100vh">
		<map style="width: 100%; height: 100%;" :scale="scale" :latitude="latitude" :longitude="longitude"
			:markers="covers" @callouttap="tap">
		</map>
		<view class="p20 bag--fff br--20 ding" v-if="show">
			<view class="f16 co-zhu">
				{{list.content}}
			</view>
			<view class="mt20 co--7676 f12">
				领办人：{{list.name}}
			</view>
			<view class="flex  mt20">
				<view class="co--7676 f12">
					地址：
				</view>
				<view class="f1 co--7676 f12" style="line-height: 32rpx;">
					{{list.address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: '37.73943', // 维度
				longitude: '115.66912', // 经度
				covers: [],
				list: {},
				show: false,
				scale: 13
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			tap(e) {
				console.log(e, '啦啦啦')
				// e.detail.markerId 是点击的标记的 id
				const markerId = e.detail.markerId;

				// 根据 markerId 查找对应的数据项
				const clickedItem = this.covers.find(item => item.id === markerId);

				// 输出或使用 clickedItem 进行其他操作
				console.log('点击的标记数据:', clickedItem);
				this.list = clickedItem.callout
				this.show = true
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.supermarket()
				this.covers = [];

				data.list.forEach(item => {
					// 检查经纬度数据有效性
					if (item.lat && item.lng) {
						this.covers.push({
							id: item.id,
							latitude: item.lat,
							longitude: item.lng,
							iconPath: '../../static/location.png',
							width: 10,
							height: 10,
							callout: {
								content: item.name,
								display: 'ALWAYS',
								bgColor: '#fff',
								padding: 10,
								color: '#0256FF',
								fontSize: 12,
								borderRadius: 10,
								name: item.people,
								address: item.address,
								tel: item.tel
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ding {
		position: absolute;
		bottom: 50rpx;
		left: 20rpx;
		right: 20rpx;
		// border-: ;
	}
</style>